import React, { PureComponent } from 'react'
import { Button } from "antd";
import { connect } from "react-redux";
import QRCode from 'qrcode.react'
import notify from "@utils/tip";
import { getAppName } from "@utils/vars";
import {
    getWxQrCode,
    ticketAutoLogin
} from "@sagas/user";
import {setCookie} from "@utils/cookie";
import {withRouter} from "react-router-dom";

@connect(null, {
    getWxQrCode,
    ticketAutoLogin
})
@withRouter
class LoginPage extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            ticket: '',
            url: '',
            showRefresh: false
        }
        this.pollingInterval = null
        this.getQrCode = this.getQrCode.bind(this)
        this.showRefresh = this.showRefresh.bind(this)
        this.hideRefresh = this.hideRefresh.bind(this)
        this.startPollingInterval = this.startPollingInterval.bind(this)
        this.clearPollingInterval = this.clearPollingInterval.bind(this)
    }

    componentDidMount() {
        this.getQrCode()
    }

    componentWillUnmount() {
        this.clearPollingInterval()
    }

    startPollingInterval(){
        const { ticketAutoLogin } = this.props
        const { ticket } = this.state
        if (this.pollingInterval) {
            clearInterval(this.pollingInterval)
        }
    
        this.pollingInterval = setInterval(() => {
            try{
                ticketAutoLogin({
                    ticket
                },(res)=>{
                    if(res.status === 'ok'){
                        this.clearPollingInterval()
                        setCookie('bilin-user', res.token)
                        this.props.history.replace('/brand-list')
                    }
                })
            } catch(error){
                console.log('error',error)
            }
        }, 2000)
    }

    clearPollingInterval() {
        if (this.pollingInterval) {
            clearInterval(this.pollingInterval);
            this.pollingInterval = null;
        }
    }

    showRefresh(e) {
        e.preventDefault();
        e.stopPropagation();
        this.setState({
            showRefresh: true
        })
    }

    hideRefresh(e) {
        e.preventDefault();
        e.stopPropagation();
        this.setState({
            showRefresh: false
        })
    }

    getQrCode() {
        const { getWxQrCode } = this.props
        getWxQrCode(res => {
            if (res.ticket) {
                this.setState({
                    ticket: res.ticket,
                    url: res.url
                })
                this.startPollingInterval()
            }
        })
    }
    render() {
        const { url, showRefresh } = this.state
        return (
            <div className="bilin-web">
                <div className='bilin-login pd-24'>
                    <div className="login-header">
                        <div className='logo'></div>
                        <div className='title mgl-12 ft-16 clr-fff'>{getAppName()}</div>
                    </div>
                    <div className='login-content'>
                        <div className='content-left'>
                            <p className="ft-20 clr-fff ft-w600 opa-80">七星便利店 X {getAppName()}</p>
                            <p className="ft-40 mgt-24 clr-fff ft-w400">线上线下一体化</p>
                            <p className="ft-40 mgt-24 clr-fff ft-w400">构建微信私域运营产品矩阵</p>
                            <p className="ft-40 mgt-24 clr-fff ft-w400">赋能品牌+消费体验升级</p>
                        </div>
                        <div className='content-right'>
                            <span className='ft-20 ft-clr-d mgt-48'>快捷扫码登录</span>
                            <span className='mgt-8 ft-clr-ml'>注册即代表阅读并同意<span className='clr-green cur-poi'>《用户协议》</span></span>
                            <div onMouseEnter={this.showRefresh} onMouseLeave={this.hideRefresh} className='mgt-36 qr-code'>
                                {url ? <QRCode value={url} size={228} /> : null}
                                {/* {showRefresh && <div className='refresh ft-hover' onClick={this.getQrCode}>
                                    点击刷新
                                </div>} */}
                            </div>
                            <span className='mgt-36 ft-clr-ml'>请使用微信“扫一扫”，关注公众号登录</span>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default LoginPage
